<template>
	<div id="">
		<div id="" class="location-header">
				<i class="iconfont">&#xe666;</i>  
				<input class="location-header-inp changeInp" v-model="keyword"   ref="input" type="text" :placeholder="value" />
				<i class="iconfont iconCha" ref="cha" @click="clear">&#xe628;</i>
				<span id="" class="location-header-spa" ref="cancel" @click="changBulr">
					取消
				</span>
		</div>
		<div id="" class="location-header-goic" ref="wrp">
			<ul class="location-header-ul" >
				<li v-show="sign" class="li">{{show}}</li>
				<li v-for="items in goic">{{items.name}}</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default{
		props:{
			cities:Object
		},
		data(){
			return{
							//1代表本身没有内容或逐字情况
				sign:'false',
				show:"输入中文或拼音",
				value:'中文/拼音/首字母',
				changebutton:'',
				changeSymbol:'',
				lcd:'',
				flag:1,
				keyword:'',
				goic:[],
				iLetter:'',
			}
		},
		computed:{
			
		},
		methods:{
			changBulr(){
				this.$refs.cha.style.display="none";
				this.$refs.cancel.style.display="none";
				this.$refs.wrp.style.display="none";
				this.keyword=''
			},
			clear(e){
				this.keyword='中文/拼音/首字母';
				this.show="输入中文或拼音"
				
			}
			
		}
		,
		watch:{
				keyword(){
					let content = this.keyword.trim()
					if(content===''){//内容为空
						this.show="输入中文或拼音"
					}else if(/^[0-9]+$/.test(content)){
						  //内容数字
						  this.goic=[];
						  console.log(this.city)
						this.show="对不起，臣妾找不到"+this.keyword+"呢！"
					}else if(/^[a-zA-Z]+$/.test(content)){
						 
						
						let result=[];
					var lowContent=content.toLowerCase()
						for(let i in this.cities){
							if(i.toLowerCase().indexOf(lowContent.substr(0,1))>-1){
								this.cities[i].forEach((value)=>{
									if(value.spell.indexOf(lowContent)>-1){
										result.push(value);
										this.goic=result;
										this.sign=false;
									}else if(lowContent.indexOf(value.spell)>-1){
										this.show="对不起，臣妾找不到"+this.keyword+"呢！"
										this.sign=true;
									}
									
								})
							}else if(lowContent.substr(0,1)==='u'||
												lowContent.substr(0,1)==='i'||
												lowContent.substr(0,1)==='v'||
												lowContent.substr(0,1)==='o'){
													this.show="对不起，臣妾找不到"+this.keyword+"呢！"
													this.sign=true;
													 this.goic=[];
												}
						}
						
					}else if(/^[\u4e00-\u9fa5]+$/.test(content)){
						for(var i in this.cities){
							console.log('i')
							for(let j=0;j<this.cities[i].length;j++){
								if(this.cities[i][j].name.indexOf(content)>-1){
									this.goic.push(this.cities[i][j]);
								};
							}
						}
					}
				}
		},
		mounted(){
			this.keyword=this.$refs.input.value;
			let _this=this;
			_this.$refs.input.onfocus=function(){
				_this.$refs.cha.style.display="block";
				_this.$refs.cancel.style.display="block";
				_this.$refs.wrp.style.display="block";
				_this.lcd="none";
				_this.keyword=""
			};
			
			this.scroll = new BScroll(this.$refs.wrp,{//input 滚动
	     		click:true,
	      		mouseWheel:{
		       	 	speed:20,
		       		invert:false,
		       		easeTime:300
    		 	 }
   			});
		},
		
	}
	
</script>
<style lang="stylus" scoped="scoped">
.location-header
	width:100%
	height:1rem
	box-sizing:border-box
	background:#e0e4ec
	padding:.15rem .1rem
	position:fixed
	top:0
	left:0
	bottom:0
	display:flex
	justify-content:flex-start
	z-index:1000
	.iconfont
		background:white
		line-height:0.5rem;
		padding: .1rem  .1rem  .1rem  .3rem;
		border-radius: .1rem 0 0 .1rem;
	.location-header-inp
		width:86%
		border-radius: 0 .1rem .1rem 0;
		color:#999;
	.iconCha
		display: none;
		background:#eee
		border-radius:50%
		position:absolute
		top:.2rem
		right:1.8rem
		font-size:1px
		height:.2rem
		width:.4rem
		text-align:center
		align-items: column
		padding:.1rem .1rem .3rem .18rem
	.location-header-spa
		display: none;
		background:none
		position:absolute
		font-size:.35rem
		top:.33rem
		right:.8rem
.location-header-goic
	display: none;
	position:absolute
	top:1rem
	right:0
	bottom:0
	width:100%
	z-index:100
	.location-header-ul	
		height:40rem
		background:#eee
		li
		&:before
			border:.333px solid #eee
			padding:.2rem .4rem
			background:#fff
</style>